<template>
  <div class="addMenus">
    <el-form ref="form" :model="form" label-width="80px">
      <el-form-item label="标题" prop="catename">
        <el-input class="input" v-model="form.title"></el-input>
      </el-form-item>
      <el-form-item class="input" label="图片" prop="img">
        <el-upload
          ref="uploadRef"
          class="avatar-uploader"
          action=""
          :show-file-list="false"
          :auto-upload="false"
          :on-change="imgChange"
        >
          <img v-if="imgUrl" :src="imgUrl" class="avatar" />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
      <el-switch
        class="mode"
        v-model="form.status"
        inactive-text="状态"
        :active-value="1"
        :inactive-value="2"
      >
      </el-switch>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">添加</el-button>
        <el-button type="info" @click="back">返回</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import { setBannerApi,getBannerApi } from "@/api/banner";
export default {
  data() {
    return {
      arr: [],
      form: {
        title: "",
        img: null,
        status: 1,
      },
      imgUrl: "",
    };
  },
  mounted() {
    this.getList()
  },
  methods: {
    //提交添加事件,图片转文件流
    async onSubmit() {
      console.log(this.form);
      const formData = new FormData();
      for (let attr in this.form) {
        formData.append(attr, this.form[attr]);
      }
      formData.append('id',this.$route.query.id)
      /*       console.log(formData); */
      let res = await setBannerApi(formData);
      if (res.code == 200) {
        this.$message({
          type: "success",
          message: res.msg,
        });
        this.clearFormData();
      } else {
        this.$message({
          type: "warning",
          message: res.msg,
        });
      }
    },
    //清除表单
    clearFormData() {
      this.form = {
        title: "",
        img: null,
        status: 1,
      };
      this.imgUrl=''
    },
    //返回
    back() {
      this.$router.push("/banner");
    },
    //当上传图片的状态改变了的时候,进行文件流的转换
    imgChange(file) {
      // 3.处理本地url路径
      this.imgUrl = URL.createObjectURL(file.raw);
      // 4.将文件赋值给form里面的img
      this.form.img = file.raw;
      console.log(this.form.img);
    },
    //获取初始化的数据
    async getList(){
      let res=await getBannerApi(this.$route.query.id)
      console.log(res.list)
      this.form=res.list
      this.imgUrl=this.$pregImg+res.list.img
    }
  },
};
</script>
<style scoped lang="less">
.addMenus {
  .input {
    width: 40%;
  }
  .mode {
    margin: 0 0 30px 12px;
  }
}
/deep/ .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/ .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
